<!doctype html>
<html lang="en">
<head>
    <title>Data Surveyor</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

    <!-- Optional theme -->
    <link href="https://cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet">

    <!-- Font Awesome -->
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <link href="https://cdn.bootcss.com/layer/3.1.0/theme/default/layer.css" rel="stylesheet">

    <style>
    body{font-family:'microsoft yahei'}
    .pagetitle{margin:15px auto 0px;padding:30px 0;text-align:center;color:#eee; border-radius:5px;font-size:25px;
        background: #1c92d2;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to left bottom, #f2fcfe, #1c92d2);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to left bottom, #f2fcfe, #1c92d2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    }
    .line1{height:1px;margin:15px auto;transform:scaleY(.2);-webkit-transform:scaleY(.2);background-color:#ccc}
    .inputtitle{height:20px;color:#666}
    .center{display:flex;justify-content:center;align-items:center}
    .wrap{padding:0 15px}
    .col-xs-12{margin:15px auto;}
    .back{position:fixed;right:15px;top:15px;z-index:2;width:45px;height:45px;border-radius:50%;box-shadow:0 0 15px #ccc;text-align:center;line-height:45px;background:rgba(255,255,255,.5);color:#666}
    .back a{text-decoration:none}
    .preview{height:200px;box-shadow:0 0 2px #ddd;margin:10px auto;border-radius:10px;color:#ccc;background-color:#f5f5f5;background-position:center center;background-size:contain;background-repeat:no-repeat}
    </style>
</head>
<body>

<div class="back">
    <a href="./index.html" class="fa fa-chevron-left"></a>
</div>

<div class="wrap">
<div class="pagetitle">
  测量数据提交
</div>
<div class="row">

        <div class="col-sm-6 col-xs-12">
            <input id="surveyor" name="surveyor" class="form-control" type="text" value=""  placeHolder="请填写姓名">
        </div>

        <div class="col-sm-6 col-xs-12">
            <input id="tool" name="tool" class="form-control" type="text" placeHolder="请填写测量工具">
        </div>

        <div class="col-sm-6 col-xs-12">
          <input id="thing" name="thing" class="form-control" type="text" placeHolder="请填写测量物件">
        </div>

        <div class="col-sm-6 col-xs-12">
          <input id="testValue" name="testValue" class="form-control" type="text" placeHolder="请填写测量结果">
        </div>

  
        <div class="col-sm-6 col-xs-12">
          <input type="file" accept="image/*" name="wx_code" id="inputImage" value=""  class="hide" >
          <div class="preview center fixiosclick" data-url="" >
            <span class="fa fa-camera"> 请上传测量图片</span>
          </div>
        </div>



        <div class="col-xs-12">
            <button id="saveSubmit" class="btn btn-primary btn-block btn-lg  " type="button">提 交</button>
        </div>
   

    </div>







</div>



</body>

<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>

<script src="/laydate/laydate.js"></script>

<script type="text/javascript">


$(document).ready(function(){

    $('#inputImage').on('change',function(){
        var formData = new FormData();
        // formData.append("upfile", this.files[0]);
        formData.append("image", this.files[0]);
        var request = new XMLHttpRequest();
        request.open("POST", "{:url('index/Index/upload')}");
         //console.log(formData);
        var that = $(this);
        var layerimg = layer.load();
        request.onload = function (e) {
        layer.close(layerimg);
            if (request.status == 200) {
                var res = JSON.parse(e.target.responseText);
                $('.preview').css({"background-image":"url('/"+res.filePath+"')"});//前台预览
                $('.preview').data('url',res.filePath);//保存到data用于后面上传

            }
        };
        request.send(formData);
    })


    $('.preview').on('click',function(){
      $('#inputImage').click();

    })

    function checkvalue(json){
          var check = false;
           $.each(json,function(name,value) {
            if($.trim(value).length==0){

              check = true;
              return false;
            }
          });

          return check;

    }

    $('#saveSubmit').on('click', function(e){

            // var json = $('#infoForm').serialize();
            var json = {};

            json.surveyor = $.trim($('#surveyor').val());
            json.tool = $.trim($('#tool').val());
            json.thing = $.trim($('#thing').val());
            json.testValue = $.trim($('#testValue').val());


            if(checkvalue(json)){
              layer.msg('请填写完整提交信息');
              return;
            }

            var imgurl= $('.preview').data('url');
            if(imgurl!=undefined&&imgurl.length>0){
                json.imageUrl = imgurl;
            }

            var that = $(this);
            that.html('<span class="fa fa-spinner fa-spin"></span> 提 交').attr('disabled',true);
          //  console.log(json);return;
            $.post('{:url("index/Index/commitData")}', json, function(message){
                that.html('提 交').attr('disabled',false);
                console.log(message);
                if(1){
                  layer.msg('提交成功',function(){
                    window.location.href="./index.html";
                  })
                }else{
                  layer.msg('提交失败');
                }

            });
                
    });

})


</script>

</html>